<script lang="ts" setup>
import { computed, onMounted } from 'vue';

import { InputNumber } from 'ant-design-vue';

const emit = defineEmits(['blur', 'change']);

const modelValue = defineModel<[number, number]>('value', {
  default: () => [undefined, undefined],
});

const currValue = computed({
  get: () => modelValue.value ?? [undefined, undefined],
  set: (val) => {
    modelValue.value = val;
  },
});

const firstMax = computed(() => {
  return currValue.value?.[1] > 0 ? currValue.value[1] : Infinity;
});

const secondMin = computed(() => {
  return currValue.value[0] > 0 ? currValue.value[0] : -Infinity;
});

function onChange() {
  emit('change', modelValue.value);
}

onMounted(() => {
  if (modelValue.value === null) {
    modelValue.value = [undefined, undefined];
  }
});
</script>
<template>
  <div class="flex w-full items-center gap-2">
    <InputNumber
      v-model:value="currValue[0]"
      placeholder="最小值"
      class="flex-1"
      allow-clear
      :min="0"
      :max="firstMax"
      type="tel"
      @blur="emit('blur')"
      @change="onChange"
    />
    <span>-</span>
    <InputNumber
      v-model:value="currValue[1]"
      placeholder="最大值"
      class="flex-1"
      allow-clear
      :min="secondMin"
      type="tel"
      @blur="emit('blur')"
      @change="onChange"
    />
  </div>
</template>
